<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/ajax.js"></script>
    <script src="../js/jquery-3.1.1.min.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .header {
        line-height: 50px;
        height: 50px;
        background-color: #3594d6;
        padding: 0 20px;
    }

    .headerleft {
        float: left;
    }

    .headerright {
        float: right;
    }

    .header a {
        padding: 10px;
    }

    .nav {
        float: left;
        width: 15%;
        background-color: white;
        border: 1px solid gray;
        position: absolute;
        top: 50px;
        bottom: 0;
        overflow: auto;
    }

    .content {
        width: 85%;
        position: absolute;
        right: 0;
        /*定位后脱离文档流 不自动继承父元素的宽高 */
        top: 50px;
        bottom: 50px;
        overflow: auto;
    }
</style>
<script>
    $(function () {
        $("#nav").load("/back/nav.html");
    })
</script>
<body>
<div class="header">
    <div class="headerleft">
        欢迎进入后台管理
    </div>
    <div class="headerright">
        <a href="home.html">后台首页</a>
        <a href="../html/home.html" target="_parent">网站首页</a>
        <a href="login.html">退出</a>

    </div>
</div>
<div class="nav" id="nav"></div>
<div class="content" id="content"></div>
</body>
</html>